<template>
  <div class="chat-action-bar">
    <div class="chat-btn">
      <van-icon name="chat-o" size="18" />
    </div>
    <div class="chat-input">
      <van-field v-model="message" placeholder="发消息..." />
    </div>
    <div class="chat-btn chat-btn-ml">
      <van-icon name="smile-o" size="18" />
    </div>
    <div class="chat-btn chat-btn-ml">
      <van-icon name="add-o" size="18" />
    </div>
<!--     <div class="chat-action-bar__action">
      <van-icon name="chat-o" size="18" />
    </div>
    <div class="chat-action-bar__input">
      <div class="chat-action-bar__identity">
        <van-image round width="20px" height="20px" src="https://img.yzcdn.cn/vant/cat.jpeg" />
        <van-image round width="20px" height="20px" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      </div>
      <van-field v-model="message" placeholder="发消息..." />
    </div>
    <div class="chat-action-bar__action chat-action-bar__action--margin-right">
      <van-icon name="chat-o" size="18" />
    </div>
    <div class="chat-action-bar__action">
      <van-icon name="chat-o" size="18" />
    </div> -->
  </div>
</template>

<script>
import { Field, Icon, Image } from "vant";
import { defineComponent, ref } from "vue";

export default ({
  name: "ChatActionBar",
  components: {
    [Field.name]: Field,
    [Image.name]: Image,
    [Icon.name]: Icon,
  },
  setup() {
    const message = ref("");
    return { message };
  },
});
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.chat-action-bar {
  //position: fixed;
  //right: 0;
  //left: 0;
  //bottom: 0;
  display: flex; justify-content: space-between; align-items: center; 
  margin-bottom: 20px;

  &__identity {
    display: flex;

    ::v-deep .van-image {
      margin-right: 6px;
    }
  }

  &__input {
    flex: 1;
    margin: 0 10px;
    padding: 0 10px;
    background: $white;
    border-radius: $border-radius-max;
    display: flex;
    align-items: center;

    ::v-deep .van-field {
      border-radius: $border-radius-max;
      height: 36px;
      align-items: center;
      padding-left: 0;
    }
  }

  &__action {
    width: 36px;
    height: 36px;
    background: $white;
    border-radius: $border-radius-max;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    &--margin-right {
      margin-right: 10px;
    }
  }
  .chat-btn{
    display:flex; justify-content:center; align-items:center; width:74px; height:74px; background-color:#fff; border-radius:50%;
  }
  .chat-btn-ml{ margin-left:24px;}
  .chat-input{
    display:flex; justify-content:center; align-items:center; margin-left:24px; height:74px; background-color:#fff; border-radius:36px; overflow:hidden;
    .van-cell{ padding:0 16px;}
  }
}
</style>
